<!--
 * 用户 表单
 * :
 * @version: 1.0
 * @author: lakeside hubin_yuan.410@hotmail.com
 * @date: 20120-07-14
 * @LastEditors:
 * @LastEditTime:
 -->
<template>
  <el-form ref="userForm" :disabled="!form.editable" :model="form.entry" :rules="form.editable?rules:{}" label-position="right"
           label-width="6rem">
    <el-card class="m-b-1">
      <!--<h4>基本信息</h4>-->
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="头像" prop="avatarUrl">
            <el-input v-model="form.entry.avatarUrl" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="form.entry.realName" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="身份证号" prop="cardId">
            <el-input v-model="form.entry.cardId" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.entry.email" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="form.entry.mobile" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="居住地" prop="habitation">
            <el-input v-model="form.entry.habitation" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="工号" prop="jobCode">
            <el-input v-model="form.entry.jobCode" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="组织" prop="organizeId">
            <human-organize-chooser v-model="form.entry.organizeId" :disabled="!form.editable"
                                    :readonly="!form.editable">
            </human-organize-chooser>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="领导" prop="leaderId">
            <el-input v-model="form.entry.leaderId" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="职位" prop="jobPost">
            <el-input v-model="form.entry.jobPost" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="m-b-1">
     <!-- <h4>授权信息</h4>-->
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.entry.username" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.entry.password" :disabled="!form.editable" :readonly="!form.editable"
                      autocomplete="off" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="关联角色" prop="roles">
            <security-role-chooser v-model="form.entry.roles" :disabled="!form.editable" :readonly="!form.editable" autocomplete="off"
                                   dataMode="Object"
                                   multiple placeholder=""></security-role-chooser>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="12" :md="24">
          <el-form-item label="失效时间" prop="expiredTime">
            <el-date-picker v-model="form.entry.expiredTime" :disabled="!form.editable"
                            :readonly="!form.editable"
                            align="l" format="yyyy-MM-dd HH:mm:ss"
                            placeholder="" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="有效状态" prop="validStatus">
            <dict-option-select v-model="form.entry.validStatus" :dictField="this.$constants.coreDict.validStatus.key"
                                :disabled="!form.editable"
                                :readonly="!form.editable"
                                autocomplete="off" placeholder=""></dict-option-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <el-row v-if="!form.editable">
      <el-col :lg="12" :md="24">
        <el-form-item label="创建者" prop="createdByName">
          <el-input v-model="form.entry.createdByName" :disabled="!form.editable" :readonly="!form.editable"
                    autocomplete="off" placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="创建时间" prop="createdDate">
          <el-date-picker v-model="form.entry.createdDate" :disabled="!form.editable" :readonly="!form.editable" align="l"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="" type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="最后修改者" prop="modifiedByName">
          <el-input v-model="form.entry.modifiedByName" :disabled="!form.editable" :readonly="!form.editable"
                    autocomplete="off"
                    placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="最后修改时间" prop="modifiedDate">
          <el-date-picker v-model="form.entry.modifiedDate" :disabled="!form.editable" :readonly="!form.editable" align="l"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="" type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :lg="24" :md="24">
        <el-form-item label="备注描述" prop="remarkNote">
          <el-input v-model="form.entry.remarkNote" :autosize="{minRows: 2}" :disabled="!form.editable"
                    :readonly="!form.editable" autocomplete="off"
                    placeholder="" type="textarea">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import DictOptionSelect from "@/views/system/components/DictOptionSelect";
import HumanOrganizeChooser from "../../components/humanOrganizeChooser";
import SecurityRoleChooser from "@views/security/components/SecurityRoleChooser";

import *  as humanUserApi from '../../apis/user'

export default {
  name: "humanUserForm",
  model: {
    prop: 'form',
  },
  props: {
    form: {type: Object},
  },
  components: {SecurityRoleChooser, HumanOrganizeChooser, DictOptionSelect},
  data() {
    return {
      rules: {
        avatarUrl: [
          {max: 250, message: '头像最大长度为250', trigger: ['blur', 'change']},
        ],
        cardId: [
          {max: 20, message: '身份证号最大长度为20', trigger: ['blur', 'change']},
        ],
        email: [
          {max: 50, message: '邮箱最大长度为50', trigger: ['blur', 'change']},
        ],
        expiredTime: [],
        habitation: [
          {max: 200, message: '居住地最大长度为200', trigger: ['blur', 'change']},
        ],
        jobCode: [
          {max: 20, message: '工号最大长度为20', trigger: ['blur', 'change']},
        ],
        mobile: [
          {max: 20, message: '手机号最大长度为20', trigger: ['blur', 'change']},
        ],
        organizeId: [
          //{max: 36, message: '归属组织最大长度为36', trigger: ['blur', 'change']},
        ],
        password: [
          /*{required: true, message: '密码不能为空', trigger: ['blur', 'change']},*/
          {max: 128, message: '密码最大长度为128', trigger: ['blur', 'change']},
        ],
        realName: [
          {max: 50, message: '真实姓名最大长度为50', trigger: ['blur', 'change']},
        ],
        username: [
          {required: true, message: '用户名不能为空', trigger: ['blur', 'change']},
          {max: 128, message: '用户名最大长度为128', trigger: ['blur', 'change']},
        ],
        leaderId: [
          {max: 36, message: '领导最大长度为36', trigger: ['blur', 'change']},
        ],
        organizeCode: [
          {max: 20, message: '归属组织编码最大长度为20', trigger: ['blur', 'change']},
        ],
        jobPost: [
          {max: 20, message: '职位最大长度为20', trigger: ['blur', 'change']},
        ],
      }
    }
  },
  mounted() {
    console.log(this.form)
    this.loadBaseData()
  },
  watch: {
    'form.entry.id': {
      //deep: true,
      handler(value) {
        this.loadBaseData()
      }
    }
  },
  methods: {
    loadBaseData() {
      humanUserApi.findRoleId({id: this.form.entry.id}).then(response => {
        //let {status, message, result} = response
        this.$set(this.form.entry, "roles", response.result?response.result.map(_id => {return {id: _id}}): [])
      })
    },
    /**表单校验回调*/
    async validate(callback) {
      return await this.$refs.userForm.validate(callback)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
